import { Button } from 'antd-mobile'
import React, { Component } from 'react'

import {connect} from 'react-redux'
import { useNavigate } from 'react-router'
import { CHANGE_USER_STATE,CHANGE_USER_TOKEN } from '../../store/types'
function Index(props) {

  const navigate = useNavigate()

    return (
        <div className='box'>
        <header className='header'> 用户 </header>

        <div className='content'>
          内容 - 用户
          { props.loginState ? 
          (<Button onClick={()=>{
            props.logout()  
          }}>退出登录</Button>) : 
          (<Button onClick={()=>{
            navigate('/login')
          }}>请登录</Button>) 
          }
          
        </div>
      </div>
    )
  }

export default connect((state)=>{
  return {
    loginState: state.getIn(['user', 'loginState'])
  }
},(dis)=>{
  return {
    logout(){
      dis({type: CHANGE_USER_STATE, payload: false})
      dis({type: CHANGE_USER_TOKEN, payload: ''})
      
    }
  }
})(Index)